{php}	add_js_plugin('nivoSlider'); {/php}
{config_load file="lang/$language/lang_$language.conf" section="categorie_listing"}

 {literal}
<script>
$(document).ready(function() {
  $('#categorie_list li').hover(
    
    function(){
       $('#categorie_list li').css('opacity','0.50');
       $(this).css('opacity','1');
      
       
    },
    function(){
      $('#categorie_list li').css('opacity','1')
    }
  
  );
});
</script>
{/literal}

<link rel="stylesheet" href="/templates/itdotmedia/css/nivo-slider.css" type="text/css">
<link rel="stylesheet" href="/templates/itdotmedia/css/nivo-fullwidth.css" type="text/css">
    
<script type="text/javascript">
    $(window).load(function() {
      var slider = new $('#slider').nivoSlider({
      directionNav: true,
      pauseTime: 4000,
      effect: 'fade', 
      });
      
    });
</script>

<div class="wrapper-cat_listing_basis">
{if $CATEGORIES_HEADING_TITLE|default:$CATEGORIES_NAME}<h1>{$CATEGORIES_HEADING_TITLE|default:$CATEGORIES_NAME}</h1>{/if}
  <div class="db">
  	{if $CATEGORIES_DESCRIPTION_TAGS}
    	{if $CATEGORIES_DESCRIPTION_TAGS.slider_img}
      <div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 5px 0px 5px;">
        <div class="slider-wrapper theme-fullwidth">
          <div id="slider" class="nivoSlider"> 
        		{foreach item=slider_img from=$CATEGORIES_DESCRIPTION_TAGS.slider_img}
              <img src="/images/categories/categories_slider_images/{$slider_img}">    		
        		{/foreach}
          </div>     
        </div>
      </div>  
    	{/if}
  	{/if}
    <div style="padding: 15px; font-size: 13px; line-height: 17px;">
  	{if $CATEGORIES_DESCRIPTION !=''}
  		{$CATEGORIES_DESCRIPTION}
  	{/if}
  </div>
  <div class="clearfix"></div>
  
  {if $module_content !=''}
  	{*<h4>{#heading_more_categories#}</h4>*}
  	<ul id="categorie_list" class="m0 clearfix">
  		{foreach name=aussen item=module_data from=$module_content}
  			<li class="fl" style="width:213px">
  				{if $module_data.CATEGORIES_IMAGE}
  					<a href="{$module_data.CATEGORIES_LINK}" title="{$module_data.CATEGORIES_NAME}">
  						<img style="width:211px;" src="/{$module_data.CATEGORIES_IMAGE}" alt="{$module_data.CATEGORIES_IMAGE_ALT}" {*$module_data.CATEGORIES_IMAGE_DIMENSION*} title="{$module_data.CATEGORIES_NAME}" />
  					</a><br />
  				{/if}
  				<h2><a href="{$module_data.CATEGORIES_LINK}" title="{$module_data.CATEGORIES_NAME}">{$module_data.CATEGORIES_NAME}</a></h2>
          <a href="{$module_data.CATEGORIES_LINK}" title="{$module_data.CATEGORIES_NAME}"><div style="text-align:center;font-size:13px;font-family:sintonybold;padding:2px 0 !important" class="css_img_button">Details</div></a>
  				{*{$module_data.CATEGORIES_DESCRIPTION}*}
  			</li>
  		{/foreach}
  	</ul><div class="clearfix"></div>
  {/if}
  {$MODULE_product_listing}
  {$MODULE_new_products}
  </div>
</div>